import React from 'react'
import DayPickerInput from 'react-day-picker/DayPickerInput'
import moment from 'moment'
import MomentLocaleUtils, { formatDate, parseDate } from 'react-day-picker/moment'
import 'react-day-picker/lib/style.css'

const WEEKDAYS_SHORT = {
  cn: ['日', '一', '二', '三', '四', '五', '六'],
}
const MONTHS = {
  cn: [
    '一月',
    '二月',
    '三月',
    '四月',
    '五月',
    '六月',
    '七月',
    '八月',
    '九月',
    '十月',
    '十一月',
    '十二月',
  ],
}

const WEEKDAYS_LONG = {
  cn: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
}

const FIRST_DAY_OF_WEEK = {
  cn: 1,
}
// Translate aria-labels
const LABELS = {
  cn: { nextMonth: '下月', previousMonth: '上月' },
}

export default class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      locale: 'cn',
    }
  }

  render() {
    const { locale } = this.state
    const { onChange } = this.props
    return (
      <div>
        <p style={{ display: 'inline', paddingRight: '1em' }}>选择日期:</p>
        <DayPickerInput
          dayPickerProps={{
            locale,
            months: MONTHS[locale],
            weekdaysLong: WEEKDAYS_LONG[locale],
            weekdaysShort: WEEKDAYS_SHORT[locale],
            firstDayOfWeek: FIRST_DAY_OF_WEEK[locale],
            labels: LABELS[locale],
          }}
          onDayChange={onChange}
          formatDate={formatDate}
          parseDate={parseDate}
          format="LL"
          placeholder={`${formatDate(moment(0, 'HH'))}`}
        />
      </div>
    )
  }
}
